<template>
  <el-form-item v-show="_type_!=='hidden'" class="form-slot-item" :class="{block:block, br_item:br}" :label="label" :label-width="label_width" :error="this_error">
    <div class="form-item-content">
      <input v-if="name && !remove_name" type="hidden" :name="name" :value="this_value">
      <template v-if="$slots.default">
        <slot :update_value="update_value" :name="name" :value="this_value"></slot>
      </template>

      <UnifyParamTabs v-else-if="_types_.length" :_types_="_types_" :_props_="_props_" :size="size" v-model="this_value" ></UnifyParamTabs>
      <UnifyParam v-else :_type_="_type_" :_props_="_props_" :size="size" v-model="this_value" ></UnifyParam>
    </div>
    <p v-if="this_tip" class="tip" v-html="this_tip"></p>
  </el-form-item>
  <div v-if="br" class="br-row"></div>
</template>

<script setup lang="ts">
// @ts-nocheck
import UnifyParam from "@/components/auto_import/UnifyParam.vue";
import UnifyParamTabs from "@/components/auto_import/UnifyParamTabs.vue";
import {computed, inject, onMounted, onUnmounted, type PropType, ref, watch} from "vue";
import type {TypeParamComponents} from "@/components/auto_import/UnifyParam.vue"
import {provideFormSlot} from "@/components/provide_keys.ts";
import {laravel_validate_value} from "@/js/s94_tool";

defineOptions({
  components: {UnifyParamTabs,UnifyParam},
  _tip_: '表的项，整合了样式、参数提示、验证、错误提示'
})
const props = defineProps({
  _type_: {
    type: String as PropType<TypeParamComponents | string>,
    default: '',
  },
  _types_: {
    type: Array as PropType<(TypeParamComponents | string)[]>,
    default: [],
  },
  _props_: {
    type: Object,
    default: {}
  },
  is_info: Boolean,
  size: {
    type: String as PropType<'large' | 'small'| string>,
    default: '',
  },
  // ----------- 以上为透传给UnifyParam、UnifyParamTabs 组件的props -------------
  label: {
    type: String,
    _tip_: '表单项标签名',
  },
  name: {
    type: String,
    _tip_: '参数名，作为对象的key汇聚到表单data对象中',
  },
  value: {
    type: [String,Number,Object,Array],
    default: '',
    _tip_: '参数值',
  },
  tip:  {
    type: String,
    _tip_: '提示信息',
  },
  label_width: [String, Number],
  validate: Object as PropType<string[] | string | ((val:any)=>string)>,
  block: Boolean,
  br: Boolean,
  error: String,
  remove_name: Boolean,
})
const emit = defineEmits(['change'])

const { error_map, push_item, delete_item} = inject(provideFormSlot, {});

const this_value = ref(props.value);
const validate_error = ref('');

const this_error = computed(()=>{
  return validate_error.value || props.error || (props.name && error_map ? error_map.value[props.name] : '')
})

function update_value(val){
  this_value.value = val;
  emit('change', val);
}
function validate(){
  if (!props.validate) return '';
  if (typeof props.validate === 'function') {
    validate_error.value = props.validate(this_value.value);
  }else {
    let rule_list = typeof props.validate === 'string' ? props.validate.split('|') : props.validate;
    validate_error.value = laravel_validate_value(this_value.value, rule_list, props.label || props.name).join(' \n');
  }
  return validate_error.value;
}

let item_index = undefined;
onMounted(()=>{
  let item_row = {props, value:this_value, update_value, validate};
  if(push_item) item_index = push_item(item_row)
})
onUnmounted(()=>{
  if(delete_item) delete_item(item_index)
})

const this_tip = computed(()=>{
  let str = props.tip || props.tips || '';
  return str.replace(/\n/g,'</br>')
})

defineExpose({
  value: this_value,
  validate,
  update_value,
})


</script>

<style scoped>
.form-slot-item{margin: 0 9px;padding: 10px 0;}
.form-slot-item.block{display: flex;}
.form-slot-item .tip{font-size: 12px;line-height: 1.5;color: var(--color-bg-re-r);}
.form-slot-item .form-item-content{width: 100%}
.form-slot-item:hover .tip{color: var(--color-primary-r);}
.br-row{display: block;width: 100%;height: 0;}
</style>